import React, { Component } from 'React';
import Head from 'views/component/head/head';
import { Picker, List, InputItem, DatePicker } from 'antd-mobile';
import { createForm } from 'rc-form';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import TableBox from 'views/component/table/table';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import InfiniteScroll from 'react-infinite-scroller';
import api from 'js/api/index';
import { i18n } from 'js/core/i18n';
import './shopTour.scss';

const heads = [i18n.get('评分类别'), i18n.get('分数'), i18n.get('备注')];

let pagesize = 10;

class ShopTour extends Component {
	constructor() {
		super();
		this.query = {
			pagesize: pagesize,
			pageindex: 1,
		}
		this.state = {
			data: [],
			dataType: null,
			hasMore: true
		};
	}
	dataTypeOnChange = (dataType) => {
		this.query.pageindex = 1;
		this.query.searchkey = dataType.DataTypeID;
		this.setState({ dataType: dataType, data: [], hasMore: true })
	}
	complete = () => {
		this.query.pageindex = 1;
		this.setState({ data: [], hasMore: true })
	}
	loadMore = () => {
		if (this.state.hasMore) {
			api('/SysBase/PatrolStoreListPage', this.query).then((data) => {
				this.query.pageindex += 1;
				this.state.data = this.state.data.concat(data.data);
				if (data.data.length < pagesize) {
					this.setState({ data: this.state.data, hasMore: false, loading: false })
				} else {
					this.setState({ data: this.state.data })
				}
			});
		}
	}
	render() {
		const { getFieldProps } = this.props.form;
		let { dataType, data, hasMore } = this.state;
		return (
			<div id="shopTour" className="flex-col">
				<div className="device-container">
					<List className="picker-list">
						<div className="deviceItem device-border flex-vcenter">
							<SelectTitle classStyle="name">{i18n.get('实体名称')}</SelectTitle>
							<SubViewLink moduleName="selectDataTypeId" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择实体')} modelData={{ onChange: this.dataTypeOnChange }}>
								{dataType ? dataType.Name : <div style={{ color: '#909090' }}>{i18n.get('选择实体')}</div>}
							</SubViewLink>
						</div>
					</List>
				</div>
				<div className="flex-g-1 scroll-absolute">
					<InfiniteScroll
						pageStart={0}
						useWindow={false}
						loadMore={this.loadMore}
						hasMore={hasMore}
						threshold={50}
					>
						<TableBox heads={heads} >
							{data.map((item, index) => (
								<tr key={index}>
									<td>{item.PatrolClassName}</td>
									<td>{item.PatrolClassMatch}</td>
									<td>{item.Remark}</td>
								</tr>
							))}
						</TableBox>
					</InfiniteScroll>
				</div>
				<SubViewLink moduleName="addShopTour" title={i18n.get("新增巡店配置")} className="device-btn" modelData={{ complete: this.complete }}>
					<button type="button" className="btn btn-primary">{i18n.get('新增巡店配置')}</button>
				</SubViewLink>
			</div>
		);
	}
}

export default createForm()(ShopTour);
